<!--
 * @Author: hifishroom
 * @Date: 2021-08-20 14:18:13
 * @LastEditTime: 2021-09-03 00:04:10
 * @FilePath: \index\src\views\home\childComps\SongPushView.vue
-->
<template>
  <div>
    <title-item>
      <tab-control
        slot="title"
        class="tab-control iconfont"
        :songClass="homeSongClass"
        :title="['新歌', '新碟', '数字专辑']"
        @tabClick="tabClick"
      ></tab-control>
      <em slot="text" class="hot-audio-right"
        ><i class="hot-text">更多</i>&#xe629;</em
      >
    </title-item>
    <song-slides-4
      :imgs="goods[currentType]"
      :imgClass="SongPushImg"
      :textClass="pushText"
      :swiperOption="swiperOption"
    />
  </div>
</template>

<script>
import TitleItem from "components/content/title/TitleItem.vue";
import TabControl from "components/content/tabControl/TabControl";
import SongSlides4 from "components/common/swiper/SongSlides4";
export default {
  name: "SongPushView",
  components: {
    TabControl,
    TitleItem,
    SongSlides4
  },
  computed: {
    goods() {
      return this.$store.state.goods;
    }
  },
  watch: {
    goods: function() {
      this.goods[this.currentType];
    }
  },
  methods: {
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "newSong";
          break;
        case 1:
          this.currentType = "newPlate";
          break;
        case 2:
          this.currentType = "album";
          break;

        default:
          break;
      }
    }
  },
  data() {
    return {
      flag: true,
      currentType: "newSong",
      SongPushImg: "SongPushImg",
      pushText: "pushText",
      homeSongClass: "h-song-push",
      pageText: "recommend-page-text",
      swiperOption: {
        notNextTick: true,
        //循环
        loop: false,
        //设定初始化时slide的索引
        initialSlide: 0,
        //视图显示个数
        slidesPerView: 1,
        // freeMode: true,
        touchRatio: 2, //触摸变慢
        //自动播放
        autoplay: false,
        //滑动速度
        speed: 1000,
        //滑动方向
        direction: "horizontal",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //个体类名替换
        slideClass: "my-slide",
        wrapperClass: "my-wrapper",
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };
  }
};
</script>

<style lang="scss">
.h-song-push {
  div {
    @for $i from 0 through 2 {
      &:nth-child(#{$i}) {
        ::after {
          content: "";
          display: inline-block;
          width: 0px;
          height: 9px;
          margin-left: 10px;
          border: 0.1px solid rgb(221, 210, 210);
        }
      }
    }
  }
}

.SongPushImg {
  width: 70px;
  height: 70px;
  border-radius: 15px;
}

.pushText {
  width: 85%;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
